<template>
  <div>
    <div class="breadcrumbNav">
      <vBreadcrumb :breadcrumb="breadcrumb"></vBreadcrumb>
    </div>
    <div class="projectListBox">
      <ul class="projectList">
        <li class="projectItem" v-for="(item, index) in data" :key="index" @click="toProjectItem(item)">
          <div class="left">
            <div class="projectImg"><img src="/static/img/common/projectLogo.jpg" alt=""></div>
            <div class="title">
              <h3>{{item.projectName}}</h3>
              <p class="startTime">启动时间（{{item.startupTime}}）</p>
              <p class="contractNum">合同编号（{{item.contractNo}}）</p>
            </div>
          </div>
          <div class="right">
            <ul class="detailBox">
              <li><span class="label">合作厂商：</span><span class="value">{{item.factoryName}}</span></li>
              <li><span class="label">当前进度：</span><span class="value">{{item.processName}}</span></li>
              <li><span class="label">项目状态：</span><span class="value">{{item.projectStatus}}</span></li>
              <li><span class="label">设备质量：</span><span class="value">维修率{{item.rate}}</span></li>
              <li><span class="label">负责人：</span><span class="value">{{item.projectDutyName}}</span></li>
            </ul>
            <div class="progress">
              <span>项目进度：</span><i>{{item.status}}（{{item.percent}}%）</i>
              <el-progress :stroke-width="8" :percentage="item.percent"></el-progress>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
  import ajax from '../../../utils/ajax/index'
  import vBreadcrumb from '../../common/breadcrumb.vue'
  export default {
    components: { vBreadcrumb },
    data () {
      return {
        breadcrumb: [
          {
            name: '项目总览',
            path: 'cityList'
          },
          {
            name: '项目列表',
            path: 'projectList'
          }
        ],
        data: []
      }
    },
    mounted () {
      this.result()
    },
    methods: {
      result () {
        let that = this
        let id = that.$route.query.id // 获取url后面的参数id
        let url = that.api.projectList
        let store = that.$store
        ajax.get(url, {id: id}, store, true).then((res) => {
          console.log(res)
          let data = res.data
          that.data = data
        })
      },
      toProjectItem (item) {
        this.$router.push({path: `/projectDetail`, query: {cityId: `${this.$route.query.id}`, projectCode: `${item.projectCode}`, projectName: `${item.projectName}`, contractNo: `${item.contractNo}`, processName: `${item.processName}`, projectStatus: `${item.projectStatus}`}})
      }
    }
  }
</script>
